<template>
    <div>
      <el-dialog title="添加好友"
                 width="30%"
                 :destroy-on-close="true"
                 :visible.sync="dialogVisible">
        <div>
          <el-row>
            <el-col :span="18" style="text-align: center">
              <el-input v-model="searchText" placeholder="用户名/手机号"></el-input>
            </el-col>
            <el-col :span="6" style="text-align: center">
              <el-button @click="queryBySearchText()" type="primary" icon="el-icon-search"></el-button>
            </el-col>
          </el-row>
          <el-row v-for="(user, i) in userList" :key="i">
            <br>
            <el-col :span="8" style="text-align: center">
              <el-avatar  :size="getProportionHeight(0.05)" :src="config.baseConfig.photoBaseUrl + user.avatarUrl" @error="errorHandler">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
            </el-col>
            <el-col :span="8" style="text-align: center" :style="[{'line-height': getProportionHeight(0.06) + 'px'}, {'font-size': getProportionHeight(0.02) + 'px'}]">
              {{user.userName}}
            </el-col>
            <el-col :span="8" style="text-align: center" :style="[{'line-height': getProportionHeight(0.06) + 'px'}, {'font-size': getProportionHeight(0.02) + 'px'}]">
              <el-button @click="addFriend(user.userId)" size="small" type="primary" icon="el-icon-plus"></el-button>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "addFriend",
    data() {
      return {
        dialogVisible: false,
        searchText: "",
        userList: []
      };
    },
    methods: {
      errorHandler() {
        return true
      },
      changeDialogVisible() {
        this.searchText = this.$options.data().searchText;
        this.userList = this.$options.data().userList;
        this.dialogVisible = !this.dialogVisible;
      },
      async queryBySearchText() {
        const paramObj = {searchText: this.searchText};
        const result = await this.$api.friend.queryBySearchText(paramObj);
        if (result.code === 0) {
          this.userList = result.data;
        } else {
          this.$message.error(result.msg);
        }
      },
      async addFriend(toUserId) {
        const paramObj = {};
        paramObj.fromUserId = this.$cookieStore.getCookie("userId");
        paramObj.toUserId = toUserId;
        const result = await this.$api.friend.addFriend(paramObj);
        if (result.code === 0) {
          this.$message.success(result.msg);
        } else {
          this.$message.error(result.msg);
        }
      }
    }
  }
</script>

<style scoped>

</style>
